<template>
    <el-container class="scienceuser">
        <el-aside width="200px">
            <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#001529" text-color="#ffffffa6"
                active-text-color="#fff">
                <el-menu-item index="0">
                    <img height="32" :style="{ margin: '0 auto' }" @click="() => $router.push('/main')" :src="logoimg">
                </el-menu-item>
                <el-menu-item index="2">
                    <el-icon><icon-menu /></el-icon>
                    <span>账号管理</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <el-container>
                <el-header>
                    <el-row>
                        <el-col :span="6">
                            <span>账号管理</span>
                        </el-col>
                        <el-col :span="18" class="el-he">
                            <el-button @click="add">+ 注册新用户</el-button>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <el-table :data="scienceuser" style="width: 100%">
                        <el-table-column prop="user.gid" label="账号">
                            <template #default="{ row }">
                                {{ row.user.gid?.slice(chat?.length) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="user.gid" label="角色">
                            <template #default="{ row }">
                                {{ row.isadmin ? '管理员' : '普通角色' }}
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" prop="address" label="操作" width="240">
                            <template #default="{ row }">
                                <el-button type="primary" @click="handleClick(row)">修改</el-button>
                                <el-button type="danger" @click="del(row.ID)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
            </el-container>
            <el-dialog v-model="dialogVisible" title="注册" width="550">
                <el-form :model="form" label-width="120px" status-icon>
                    <el-form-item label="账号">
                        <el-input v-model="form.user.gid" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="form.user.password" />
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-select v-model="form.isadmin">
                            <el-option label="普通用户" :value="0" />
                            <el-option label="管理员" :value="1" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="submit">
                            保存
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { computed, inject, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { asynccreatedorupdatescienceuser, asyncdelectscienceuser, asyncselectscienctuser } from '../../api';
import { Storekey } from '../../interface';
import Studycodemodel from '../../mysql_interface/studycodemodel';

const scienceuser = ref<Studycodemodel.Iscienceuser[]>([])
const dialogVisible = ref(false)
const store = useStore(Storekey)
const user = computed(() => {
    return store.state.user
})
const logoimg = inject<string>('png')
const chat = inject<string>('chat')


const form = ref<Studycodemodel.Iscienceuser>({
    type: chat,
    user: {

    }
})



const key = inject<string>('chat')

const count = ref(0)

async function start() {
    const data = await asyncselectscienctuser({ type: chat, })
    scienceuser.value = data.rows
    count.value = data.count
}

onMounted(async () => {
    start()
})

function handleClick(data: Studycodemodel.Iscienceuser) {
    form.value = JSON.parse(JSON.stringify(data))
    form.value.user.gid = form.value.user?.gid?.slice(chat?.length)
    dialogVisible.value = true
}

function add() {
    form.value = {
        user: {},
        type: chat,
    }
    dialogVisible.value = true
}

async function submit() {
    const { gid, password } = form.value.user || {}
    if (gid?.length < 5) {
        ElMessage.error('账号最少长度在5位')
        return
    }
    if (password?.length < 6) {
        ElMessage.error('密码最少6位')
        return
    }
    form.value.user.gid = key + form.value.user.gid
    asynccreatedorupdatescienceuser(form.value).then(e => {
        start()
        dialogVisible.value = false
    }).catch(e => {
        ElMessage.error('添加失败')
    })
}

async function del(ID: number) {
    await asyncdelectscienceuser({ ID }).then(e => {
        start()
    }).catch(f => {
        ElMessage.error('删除失败')
    })
}



</script>

<style scoped>
.scienceuser {
    height: 100vh;
    margin-bottom: 0 !important;
}

.el-menu-vertical-demo {
    min-height: 100vh;
}

.el-he {
    text-align: right;
}
</style>

<style>
.scienceuser .el-menu-item.is-active {
    background-color: #1890ff;
}
</style>
